<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('项目管理')"/>
    <th:block th:include="include :: select2-css"/>
    <style>
        .sortable-ghost {
            opacity: 0.4;
            background-color: #F4E2C9;
        }

        .block__list li {
            cursor: pointer;



        }

        .block__list{
            list-style: none;
            margin:0;
            padding:0;
        }
        .block__list li{
            width:auto;
            margin:0 2px;
            float: left;
            background:#d7d7dd;
            border-radius: 5px;

        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="col-sm-12 search-collapse">
        <form id="data-form">
            <input name="classPlanId" id="classPlanId" th:value="${classPlanId}" type="hidden"/>
            <input name="totalClassTimes" id="totalClassTimes" th:value="${totalClassTimes}" type="hidden"/>
            <div class="select-list">
                <ul>
<!--                    <li>-->
<!--                        <label style="width: 80px">排序编号：</label>-->
<!--                        <select name="sort" style="margin-right: 25px">-->
<!--                            <option value="A">A</option>-->
<!--                            <option value="B">B</option>-->
<!--                            <option value="C">C</option>-->
<!--                            <option value="D">D</option>-->
<!--                        </select>-->
<!--                    </li>-->
                    <li>
                        </label>课程节次：</label>
                        <select name="classTimes" id="classTimes" onchange="$.table.search()" style="margin-right: 25px">
                        </select>
                    </li>
<!--                    <li>-->
<!--                        <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i-->
<!--                                class="fa fa-search"></i>&nbsp;搜索</a>-->
<!--                        <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i-->
<!--                                class="fa fa-refresh"></i>&nbsp;重置</a>-->
<!--                    </li>-->
                </ul>
            </div>
        </form>
    </div>
    <div class="row">
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<script th:src="@{/js/sortable.js}"></script>
<script th:inline="javascript">
    // 权限

    // 字典
    var linkRuleType = [[${@dict.getType('link_rule_type')}]];
    var prefix = ctx + "business/classPlanDetail";

    $(function () {
        var totalClassTimes = $("#totalClassTimes").val();
        for (var i=1 ;i<=totalClassTimes;i++){
            $("#classTimes").append('<option value="'+i+'">'+i+'</option>');
        }

        var options = {
            url: prefix + "/list",
            modalName: "数据",
            onLoadSuccess:onLoadSuccess,
            columns: [
                {
                    field: 'linkNo',
                    title: '环节序号',
                },
                {
                    field: 'linkRuleType',
                    title: '环节规则',
                    formatter: function (value, row, index) {
                        var html = "<select  name=\"classTimes\" id='linkType"+row.linkNo+"'  style=\"margin-right: 25px\" onchange='linkTypeChange(\""+row.id+"\","+row.linkNo+")'>\n";
                        for (var k in linkRuleType) {
                            if (linkRuleType[k].dictValue == value.toString()) {
                                html += " <option value='" + linkRuleType[k].dictValue + "' selected>" + linkRuleType[k].dictLabel + "</option>";
                            } else {
                                html += " <option value='" + linkRuleType[k].dictValue + "' >" + linkRuleType[k].dictLabel + "</option>";
                            }
                        }
                        html += "</select>";
                        return html;
                    }

                },
                {
                    field: 'projectName',
                    title: '项目名称/操作方式',
                    formatter: function (value, row, index) {
                        var actions = [];
                        if(value !=null){
                            actions.push('<ul class="block__list block__list_words" title="'+row.id+'">');
                            var projectName = value.split(',');
                            var projectCode = row.projectCode.split(',');
                            for(var i in projectName){
                                actions.push('<li title="'+projectCode[i]+'">'+projectName[i]+'</li>');
                            }
                            actions.push('</ul>');
                        }
                        return actions.join('');
                    }
                },
                {
                    field: 'trainName',
                    title: '训练包',
                    formatter: function (value, row, index) {
                        var actions = [];
                        if(value !=null){
                            actions.push('<ul class="block__list block__list_words" title="'+row.id+'">');
                            var trainName = value.split(',');
                            var trainPackageId = row.trainPackageId.split(',');
                            for(var i in trainName){
                                actions.push('<li title="'+trainPackageId[i]+'">'+trainName[i]+'</li>');
                            }
                            actions.push('</ul>');
                        }
                        return actions.join('');
                    }
                },

                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        if(row.linkRuleType==2){
                            actions.push('<a class="btn btn-success btn-xs " href="javascript:void(0)" onclick="addTrainPackage(\'' + row.id + '\',\'' + row.linkRuleType + '\')"><i class="fa fa-edit"></i>增加训练包</a> ');
                        }else {
                            actions.push('<a class="btn btn-success btn-xs " href="javascript:void(0)" onclick="addProjectC(\'' + row.id + '\',\'' + row.linkRuleType + '\')"><i class="fa fa-edit"></i>增加项目/操作方式</a> ');
                        }
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    });

    function onLoadSuccess(data){
        var tempObj= document.querySelectorAll('.block__list');
        for(var i=0;i<tempObj.length;i++){
            Sortable.create(tempObj[i], {
                animation: 150, //动画参数
                onEnd: function (evt) { //拖拽完毕之后发生该事件
                    var id=evt.from.title;
                    var projectCode=[];
                    for(var j=0;j<evt.from.children.length;j++){
                        projectCode.push(evt.from.children[j].title)
                    }
                    var reqData={
                        "classPlanDetailId":id,
                        "projectCodes":projectCode
                    }
                    $.ajax({
                        url: prefix + "/sortProject",
                        type: 'POST',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        data: JSON.stringify(reqData),
                        error: function (request) {
                            $.modal.alertError("系统错误");
                        },
                        success: function (data) {
                            $.table.refresh();
                        }
                    });

                }
            });
        }
    }

    function addTrainPackage(id,linkRuleType) {
        $.modal.open("添加训练包",prefix+"/checkProject/"+id+"/"+linkRuleType);
    }

    function  addProjectC(id,linkRuleType) {
        $.modal.open("添加项目/操作方式",prefix+"/checkProject/"+id+"/"+linkRuleType);
    }

    function linkTypeChange(id,linkNo){
        var linkRuleType =$("#linkType"+linkNo).val();
        $.ajax({
            url: ctx + "business/classPlanDetail/updateLinkRuleType?id=" + id+"&linkRuleType="+linkRuleType,
            type: "post",
            processData: false,
            contentType: false,
            success: function (result) {
                $.table.refresh();
            }
        })



    }
</script>
</body>

</html>